import { Input, Modal } from "antd"
import * as _ from "lodash"
import * as React from "react"
import { useEffect, useState } from "react"

const { TextArea } = Input

interface OrderStaffNotesModalProps {
  orderId: string
  staffNotes: string
  loading?: boolean
  visible: boolean
  onCancel?: () => void
  onSave?: (staffNotes: string) => void
}

export function OrderStaffNotesModal(props: OrderStaffNotesModalProps) {
  const { staffNotes, loading, visible, onCancel, onSave } = props
  const [textareaValue, setTextareaValue] = useState(staffNotes)
  useEffect(() => setTextareaValue(staffNotes), [staffNotes])

  function handleOk() {
    if (_.isFunction(onSave)) {
      onSave(textareaValue)
    }
  }

  return (
    <Modal title="卖家备注"
           visible={visible}
           keyboard={!loading}
           closable={!loading}
           cancelButtonProps={{
             disabled: loading,
           }}
           onCancel={onCancel}
           confirmLoading={loading}
           onOk={handleOk}>
      <TextArea autoSize={{ minRows: 2, maxRows: 6 }}
                value={textareaValue}
                onChange={e => setTextareaValue(e.target.value)}
                maxLength={256}/>
    </Modal>
  )
}
